<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" locale="#{localeBean.locale}">

	<h:head />
	<h:body>
		<ui:composition template="/pages/template/layout.xhtml">
			<ui:define name="content">
				<p:panel styleClass="content" header="#{i18n['newStation']}">

					<h:panelGroup layout="block" styleClass="add-station">
						<h:form id="form1">
							<p:messages id="messages" showDetail="true" autoUpdate="true" />
						</h:form>

						<h:form prependId="false">
							<h:panelGroup layout="block" styleClass="info-form">

								<h:panelGroup layout="block" styleClass="form-item">
									<h:panelGroup layout="block" styleClass="label">
										<h:outputLabel value="#{i18n['name']}:" />
									</h:panelGroup>
									<h:panelGroup layout="block" styleClass="field">
										<p:inputText value="#{stationBean.station.name}" required="true" v />
									</h:panelGroup>
								</h:panelGroup>
								<h:panelGroup layout="block" styleClass="form-item">
									<h:panelGroup layout="block" styleClass="label">
										<h:outputLabel value="#{i18n['address']}:" />
									</h:panelGroup>
									<h:panelGroup layout="block" styleClass="field">
										<p:inputText value="#{stationBean.station.address}" required="true" />
									</h:panelGroup>
								</h:panelGroup>
								<h:panelGroup layout="block" styleClass="form-item">
									<h:panelGroup layout="block" styleClass="label">
										<h:outputLabel value="#{i18n['phoneNumber']}:" />
									</h:panelGroup>
									<h:panelGroup layout="block" styleClass="field">
										<p:inputText value="#{stationBean.station.phoneNumber}" required="true" />
									</h:panelGroup>
								</h:panelGroup>

								<h:panelGroup layout="block" styleClass="form-item">
									<h:panelGroup layout="block" styleClass="label">
										<h:outputLabel value="#{i18n['location']}:" />
									</h:panelGroup>
									<h:panelGroup layout="block" styleClass="field">
										<p:gmap id="gmap" center="39.897391,32.776501" zoom="11" type="ROADMAP" style="width:600px;height:400px"
											onPointClick="handleStationPointSelect(event);" widgetVar="stationMap" />
										<h:inputHidden id="stationlat" value="#{stationBean.station.location.coordinateX}" />
										<h:inputHidden id="stationlng" value="#{stationBean.station.location.coordinateY}" />
									</h:panelGroup>
								</h:panelGroup>

								<script type="text/javascript">
									var marker = null;

									function handleStationPointSelect(event) {
										if (marker != null) {
											stationMap.removeOverlay(marker);
										}

										if (marker == null) {
											document.getElementById('page:content:stationlat').value = event.latLng.lat();
											document.getElementById('page:content:stationlng').value = event.latLng.lng();

											marker = new google.maps.Marker({
												position : new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
											});

											stationMap.addOverlay(marker);
										}
									}
								</script>

								<h:inputHidden value="#{stationBean.registeredOperatorUsername}" />

								<h:panelGroup layout="block" styleClass="form-item">
									<p:commandButton styleClass="button" value="#{i18n['save']}" action="#{stationBean.addNewStation}" ajax="false" />
								</h:panelGroup>

								<p:spacer width="100%" height="20" />
							</h:panelGroup>
						</h:form>
					</h:panelGroup>

				</p:panel>
			</ui:define>
		</ui:composition>
	</h:body>

</f:view>